import React, { useState } from 'react';
import { Button, Container, Box, Typography } from '@mui/material';
import ChatDialog from './ChatDialog';
import { SmartToy } from '@mui/icons-material';

const App: React.FC = () => {
    const [open, setOpen] = useState(false);

    // 这里应该是从你的认证系统获取的token
    const [token, setToken] = useState('your_deepseek_api_token_here');

    // 模拟登录获取token
    const handleLogin = () => {
        // 实际应用中应该调用你的认证API
        const mockToken = 'your_mock_token_from_server';
        setToken(mockToken);
        setOpen(true);
    };

    return (
        <Container maxWidth="sm" sx={{ height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <Box textAlign="center" mb={4}>
                <SmartToy sx={{ fontSize: 60, color: 'primary.main' }} />
                <Typography variant="h4" gutterBottom>
                    DeepSeek 智能助手
                </Typography>
                <Typography variant="body1" color="text.secondary" mb={4}>
                    与AI进行智能对话
                </Typography>
            </Box>

            <Button
                variant="contained"
                size="large"
                onClick={handleLogin}
                startIcon={<SmartToy />}
                sx={{ mx: 'auto', width: '80%', maxWidth: '300px' }}
            >
                开始对话
            </Button>

            <ChatDialog
                open={open}
                onClose={() => setOpen(false)}
                token={token}
            />
        </Container>
    );
};

export default App;